import React, { FC } from 'react'
import styles from './MainLayout.module.scss'
import { Outlet } from 'react-router-dom'
import { Layout, Spin } from 'antd'
import Logo from '../components/Logo'
import UserInfo from '../components/UserInfo'
import useLoadUserData from '../hooks/useLoadUserData'
import useNavPage from '../hooks/useNavPage'

const { Header, Content, Footer } = Layout

const MainLayout: FC = () => {
  const { waitingUserData } = useLoadUserData()
  useNavPage(waitingUserData)
  return (
    <Layout>
      <Header className={styles.header}>
        <div className={styles.left}><Logo /></div>
        <div className={styles.right}><UserInfo /></div>
      </Header>
      <Content className={styles.main}>
        { waitingUserData ? <div style={{'textAlign': 'center', 'marginTop': '100px'}}><Spin /></div> : <Outlet /> }
      </Content>
      <Footer className={styles.footer}>
      Copyright © 2024 EvanZ All Rights Reserved. 小牧问卷
      </Footer>
    </Layout>
  )
}

export default MainLayout